<template>
	<!-- 标题 -->
	<h2 class="m-title">购物车</h2>
	<div>
		<div class="g-goods-item" v-for="item in cartList" :key="item.id">
			<div>
				<input
					type="checkbox"
					style="margin-right: 5px; height: 100%"
					:checked="item.state == 1"
					@click="bindSingle(item.id)"
				/>
				<img :src="item.url" alt="1" />
			</div>
			<div class="g-goods-right">
				<h2 class="m-good-name ellipsis">{{ item.name }}</h2>
				<p class="ellipsis">{{ item.description }}</p>
				<div
					class="g-input-wrapper"
					style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px"
				>
					<p>{{ item.price }}￥</p>
					<!-- 计数器组件y-inputnumber -->
					<div class="y-inputnumber">
						<input type="button" value="-" :disabled="item.num == 0" @click="bindPlus(item.id, 'minus')" />
						<input type="text" :value="item.num" />
						<input type="button" value="+" @click="bindPlus(item.id, 'add')" />
					</div>
				</div>
				<!-- 计数器组件y-inputnumber -->
			</div>
		</div>
	</div>
	<van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit" style="margin-bottom: 60px">
		<van-checkbox v-model="checkall" @click="bindCheckAll">全选</van-checkbox>
		<template #tip> 你的收货地址不支持配送, <span @click="onClickLink">修改地址</span> </template>
	</van-submit-bar>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'

const cartList = ref([])
const total = ref(0)
const checkall = ref(false)

const getCartList = () => {
	axios({
		url: 'http://localhost:3000/carts',
		method: 'GET',
	}).then(res => {
		const data = res.data
		if (data.code == 1) {
			cartList.value = data.list
			getCheckStateAll()
		}
	})
}

/**
 * 当前全选状态
 */
const getCheckStateAll = ()=>{
	checkall.value = cartList.value.every(item=>item.state == 1)
}

/**
 * 全选
 */
const bindCheckAll = ()=>{

	axios({
		url:'http://localhost:3000/cart/check/state',
		method:'PUT',
		data:{
			checkstate:checkall.value
		}
	}).then(res=>{
		if(res.data.code == 1){
			getCartList()
			getTotal()
		}	
	})
}

/**
 * 数量操作
 */
const bindPlus = (id, type) => {
	console.log('id ', id)

	axios({
		url: 'http://localhost:3000/cart/' + id,
		method: 'PUT',
		data: {
			type: type,
		},
	}).then(res => {
		if (res.data.code == 1) {
			getCartList()
			getTotal()
		}
	})
}

/**
 * 单选
 */
const bindSingle = id => {
	axios({
		url: 'http://localhost:3000/cart/state/' + id,
		method: 'PUT',
	}).then(res => {
		if (res.data.code == 1) {
			getCartList()
			getTotal()

		}
	})
}

const getTotal = () => {
	axios({
		url: 'http://localhost:3000/cart/totalprice',
		method: 'POST',
	}).then(res => {
		if (res.data.code == 1) {
			total.value = res.data.total
		}
	})
}

onMounted(() => {
	getCartList()
	getTotal()
})
</script>

<style lang="css" scoped>
.m-title {
	height: 40px;
	text-align: center;
	background-color: #f5f7fa;
	font-size: 18px;
	line-height: 40px;
}
.y-inputnumber {
	width: 72px;
	height: 20px;
	display: flex;
	border: 1px solid #dcdfe6;
	border-radius: 5px;
	overflow: hidden;
}

.y-inputnumber:hover {
	border: 1px solid #c1c2c5;
}

.y-inputnumber input:first-of-type {
	width: 22px;
	height: 22px;
	border: none;
	font-size: 14px;
	color: #939598;
	background-color: #f5f7fa;
	cursor: pointer;
}

.y-inputnumber input:nth-child(2) {
	width: 26px;
	height: 22px;
	border-left: 1px solid #dcdfe6;
	border-right: 1px solid #dcdfe6;
	border-top: none;
	border-bottom: none;
	text-align: center;
	cursor: pointer;
}

.y-inputnumber input:last-of-type {
	width: 22px;
	height: 22px;
	border: none;
	font-size: 14px;
	color: #939598;
	background-color: #f5f7fa;
	cursor: pointer;
}

.g-goods-item {
	box-sizing: border-box;
	display: flex;
	border-radius: 8px;
	background-color: white;
	margin: 5px 10px;
	padding: 10px;
}
.g-goods-item img {
	width: 100px;
	height: 100px;
	margin-right: 10px;
}
.g-goods-item .g-goods-right {
	flex: 1;
	text-align: left;
}

.g-goods-item .g-goods-right h2 {
	font-size: 18px;
}

.g-goods-item .g-goods-right .ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1; /* 显示3行文本 */
}
</style>
